<template>
  <div class="earth-container">
    <!-- 浮动文本 -->
   

    <!-- SVG 图标 -->
    <EarthIcon ref="svgRef" class="earth-svg" />
  </div>
</template>


<script setup lang="ts">
import { ref, onMounted, watch, shallowRef, nextTick, computed } from "vue";
// import EarthIcon from "../../../assets/5_2_1kuang.svg";
import EarthIcon from "../../../assets/alram.svg";
import { applyAnimations, clearAllAnimations } from '../../animationManager';
import { act } from "../../../utils/websocket";
// svg 元素引用
const svgRef = ref<InstanceType<typeof EarthIcon>>();

// 接收属性
const props = defineProps({
  runEarth: { type: Boolean, default: false },
});
// const Beltrun = computed(() => act.run);

// 初始化
onMounted(() => {
  const svg = svgRef.value!.$el as SVGSVGElement;
  // 自转动画
  applyAnimations(svg, props.runEarth);
});

watch(
  () => props.runEarth,
  (newVal) => {
    const svg = svgRef.value!.$el as SVGSVGElement;
    newVal ? applyAnimations(svg, true) : clearAllAnimations(svg);
  }
);
</script>

<style scoped>
.earth-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  position: relative; /* 新增定位上下文 */
}

.earth-svg {
  transform-origin: center;
  display: block;
}
/* 浮动文字样式 */
.belt-speed-label {
  position: absolute;
  top: 115px;       /* 可调整 */
  left: 200px;      /* 可调整 */
  color: rgb(0, 255, 255);
  font-size: 17px;
  transform: rotate(11.5deg); /* ← 添加旋转 */
  pointer-events: none; /* 不影响 SVG 交互 */
  z-index: 10;
}
</style>
